import React from 'react'
import { Modal, Form, Input,Select } from 'antd'
const Option = Select.Option
const FormItem = Form.Item

class DetailsModal extends React.Component {
    constructor () {
        super()
        //控制模态框组件的显示
        this.state = {
            isShow: false,
        }
    }

    showModalHandler = e => {
        if (e) e.stopPropagation()
        this.setState({
            visible: true,
        })
    }

    hideModalHandler = e => {
        if (e) e.stopPropagation()
        this.setState({
            visible: false,
        })
    }

    okHandler = e => {
        if (e) e.stopPropagation()
        const { onOk, record: { pub_code_id } } = this.props
        this.props.form.validateFields((err, values) => {
            if (!err) {
                onOk({ pub_code_id, values })
                this.hideModalHandler()
            }
        })
    }

    render () {
        const { children } = this.props
        const { getFieldDecorator } = this.props.form
        const { code, sub_code, sub_msg,solution,user_name,pub_sub_id} = this.props.record
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        }
        return (
            <span>
                <span onClick={this.showModalHandler}>
                    {children}
                    <Modal
                        title={this.props.record?'创建':'修改'}
                        visible={this.state.visible}
                        onOk={this.okHandler}
                        onCancel={this.hideModalHandler}
                    >
                        <Form layout="horizontal" onSubmit={this.okHandler}>
                            <FormItem {...formItemLayout} label="状态码">
                                {getFieldDecorator('code', {
                                    initialValue: code,
                                })(<Select
                                    showSearch 
                                    placeholder="Select a code"
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                  >
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="tom">Tom</Option>
                                  </Select>)}
                            </FormItem>
                            <FormItem {...formItemLayout} label="明细状态码">
                                {getFieldDecorator('sub_code', {
                                    initialValue: sub_code,
                                })(<Input placeholder="请输入明细状态码" />)}
                            </FormItem>
                            <FormItem {...formItemLayout} label="说明">
                                {getFieldDecorator('code_msg', {
                                    initialValue: sub_msg,
                                })(<Input placeholder="请输入明细状态码说明" />)}
                            </FormItem>
                            <FormItem {...formItemLayout} label="解决方案">
                                {getFieldDecorator('solution', {
                                    initialValue: solution,
                                })(<Input placeholder="请输入解决方案" />)}
                            </FormItem>
                            <FormItem {...formItemLayout} label="user_name" style={{display:'none'}}>
                                {getFieldDecorator('user_name', {
                                    initialValue: user_name,
                                })(<Input />)}
                                <FormItem {...formItemLayout} label="pub_sub_id" style={{display:'none'}}>
                                {getFieldDecorator('pub_sub_id', {
                                    initialValue: pub_sub_id,
                                })(<Input />)}
                            </FormItem>
                            </FormItem>
                        </Form>
                    </Modal>
                </span>
            </span>
        )
    }
}

export default Form.create()(DetailsModal)
